<template>
	<div class="node-wrap">
		<div
			class="node-wrap-box"
			:class="{
				'start-node': nodeConfig.type == 0,
				'active error': isTried && nodeConfig.error
			}"
		>
			<div>
				<div
					class="title"
					:style="
						'background: rgb(' +
							['87, 106, 149', '255, 148, 62', '50, 150, 250'][nodeConfig.type] +
							');'
					"
				>
					<span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span>
					<span class="icon" v-if="nodeConfig.type == 1">
						<icon-svg name="flow-approval" />
					</span>
					<span class="icon" v-if="nodeConfig.type == 2">
						<icon-svg name="flow-send" />
					</span>
					<input
						type="text"
						class="editable-title-input"
						v-if="nodeConfig.type != 0 && isInput"
						@blur="blurEvent()"
						@focus="$event.currentTarget.select()"
						v-focus
						v-model="nodeConfig.nodeName"
						:placeholder="placeholderList[nodeConfig.type]"
					/>
					<span
						class="editable-title"
						@click="clickEvent()"
						v-if="nodeConfig.type != 0 && !isInput"
					>
						{{ nodeConfig.nodeName }}
					</span>
					<i
						class="close el-icon-delete"
						v-if="nodeConfig.type != 0"
						@click="delNode()"
					/>
				</div>
				<div class="content" @click="setPerson">
					<div class="text" v-if="nodeConfig.type == 0">
						{{ arrToStr(flowPermission) ? arrToStr(flowPermission) : "所有人" }}
					</div>
					<div
						class="text"
						v-if="nodeConfig.type == 1"
						:title="setApproverStr(nodeConfig)"
					>
						<span class="placeholder" v-if="!setApproverStr(nodeConfig)">
							请选择{{ placeholderList[nodeConfig.type] }}
						</span>
						{{ setApproverStr(nodeConfig) }}
					</div>
					<div class="text" v-if="nodeConfig.type == 2" :title="copyerStr(nodeConfig)">
						<span class="placeholder" v-if="!copyerStr(nodeConfig)"
							>请选择{{ placeholderList[nodeConfig.type] }}</span
						>
						{{ copyerStr(nodeConfig) }}
					</div>
					<!-- 发起人暂时不操作 -->
					<i class="el-icon-arrow-right arrow" v-if="nodeConfig.type != 0" />
				</div>
				<div class="error_tip" v-if="isTried && nodeConfig.error">
					<i class="el-icon-warning" style="color: rgb(242, 86, 67);"></i>
				</div>
			</div>
		</div>
		<add-node :childNodeP.sync="nodeConfig.childNode" />
	</div>
</template>
<script>
import AddNode from "./add-node";
import funcMixin from "./func.js";

export default {
	mixins: [funcMixin],
	components: {
		AddNode
	},
	props: {
		nodeConfig: {
			type: Object,
			default: () => ({})
		},
		flowPermission: {
			type: Array,
			default: () => []
		},
		isTried: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			placeholderList: ["发起人", "审核人", "抄送人"],
			isInputList: [],
			isInput: false
		};
	},
	created() {
		console.log(this.nodeConfig.type);
	},
	methods: {
		clickEvent(index) {
			if (index || index === 0) {
				this.$set(this.isInputList, index, true);
			} else {
				this.isInput = true;
			}
		},
		blurEvent(index) {
			if (index || index === 0) {
				this.$set(this.isInputList, index, false);
				this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[
					index
				].nodeName
					? this.nodeConfig.conditionNodes[index].nodeName
					: "条件";
			} else {
				this.isInput = false;
				this.nodeConfig.nodeName = this.nodeConfig.nodeName
					? this.nodeConfig.nodeName
					: this.placeholderList[this.nodeConfig.type];
			}
		},
		// 节点删除
		delNode() {
			this.$emit("update:nodeConfig", this.nodeConfig.childNode);
		},
		setPerson(priorityLevel) {
			var { type, settype } = this.nodeConfig;
			if (type == 0) {
				// this.$store.commit("updatePromoter", true);
				// this.$store.commit("updateFlowPermission", {
				// 	value: this.flowPermission,
				// 	flag: false,
				// 	id: this._uid
				// });
			} else if (type == 1) {
				this.$store.commit("updateApprover", true);
				this.$store.commit("updateApproverConfig", {
					value: {
						...JSON.parse(JSON.stringify(this.nodeConfig)),
						settype: settype ? settype : 1
					},
					flag: false,
					id: this._uid
				});
			} else if (type == 2) {
				this.$store.commit("updateCopyer", true);
				this.$store.commit("updateCopyerConfig", {
					value: JSON.parse(JSON.stringify(this.nodeConfig)),
					flag: false,
					id: this._uid
				});
			} else {
				this.$store.commit("updateCondition", true);
				this.$store.commit("updateConditionsConfig", {
					value: JSON.parse(JSON.stringify(this.nodeConfig)),
					priorityLevel,
					flag: false,
					id: this._uid
				});
			}
		}
	}
};
</script>
